<script setup lang="ts">
const rules = [
    'Logging into multiple email accounts on the same device all belong to the same user.',
    'The rewards obtained from inviting new users cannot be withdrawn directly. This portion of the reward will be stored in the "unreceived" balance. When the invited user withdraws $1, $2, $3, $5, $10, or $20 at any level, the "unreceived" balance will then change to "received" and become available for direct withdrawal.',
    'When the invited user withdraws $1, $2, $3, $5, $10, or $20 at any level, you will receive a 50% reward corresponding to the withdrawn amount. This amount will be in the "received" balance and can be directly withdrawn.',
    'Withdrawals cannot be made for specific amounts. Clicking "withdraw" will withdraw the entire "received" balance.',
    'When inviting new users, it is recommended to have the new users bind to your email to ensure accurate reward distribution.'
]
</script>

<template>
    <div class="rules">
        <h3 class="rules-title">Invitation Rules</h3>
        <div class="rules-list">
            <div class="rules-list-item" v-for="(rule, key) in rules">
                <h4 class="rules-list-item_index">{{ key + 1 }}.</h4>
                <p>{{ rule }}</p>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.rules {
    width: 100%;
    height: 100%;
    padding: 3vmin;

    &-title {
        font-size: 6.35vmin;
        font-weight: bold;
        color: var(--inviter-main-color);
        text-align: center;
    }

    &-list {
        width: 100%;
        height: 100%;
        margin-top: 2vmin;
        background-color: var(--inviter-main-color);
        border-radius: 3vmin;
        padding: 4vmin 2vmin;

        &-item {
            display: flex;

            &:last-child p {
                margin-bottom: 0;
            }

            &_index {
                color: #ffffff;
                font-size: var(--small-font-size);
                margin-right: 1vmin;
            }

            p {
                color: #ffffff;
                font-size: var(--small-font-size);
            }
        }
    }
}
</style>